<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5</title>
<style type="text/css">
 canvas{
  border-style: dotted;
 }
</style>
<script type="text/javascript">
 window.onload = function() /* 화면 열리자 마자 실행되는 함수 */
 { 
  var canvas = document.getElementById("mycanvas");
  var context = canvas.getContext("2d");
  
  var x = 60;
  var y = 60;
  
  //패스 그리기 시작
  context.beginPath();
  //서브패스 그리기
  context.moveTo(x,       y);
  context.lineTo(x+50,    y);
  context.lineTo(x+50,    y+50);
  context.lineTo(x+50+50, y+50);  
  context.lineTo(x+50+50, y+50+50);    
  context.lineTo(x-50,    y+50+50);  
  context.lineTo(x-50,    y+50);  
  context.lineTo(x,       y+50);  
  //패스 그리기 종료
  context.closePath();
  //그리기(채우기)
  context.stroke();
  
  x=200;
  y=60;
  
  //패스 그리기 시작
  context.beginPath();
  //서브패스 그리기
  context.arc(x+50, y+50, 50, 0, 360*Math.PI/180, true);  
  //패스 그리기 종료
  context.closePath();
  //그리기(채우기)
  context.fill();
  
  x=340;
  y=60;  
  context.beginPath();
  context.arc(x+50, y+10, 10, 0, 360*Math.PI/180, true);
  context.moveTo(x+50,    y+80);
  context.lineTo(x+50,    y);  
  context.moveTo(x+50,    y+40);  
  context.lineTo(x+30,    y+20);  
  context.moveTo(x+50,    y+40);  
  context.lineTo(x+70,    y+20);  
  context.moveTo(x+50,    y+80);  
  context.lineTo(x+30,    y+100);  
  context.moveTo(x+50,    y+80);  
  context.lineTo(x+70,    y+100);  
  context.closePath();
  context.fill();
  context.stroke();
  
 };
</script>
</head>
<body>
 <h1>테스트</h1>
 <canvas id="mycanvas" width="500" height="200"> 
   캔버스가지원되지 않는 브라우저입니다.
 </canvas> 
</body>
</html>


